@import '../../../assets/less/base/variables.less';

.add-icon {
	color: @blue;
	font-size: 14px;
	margin-left: 20px;
	display: flex;
	align-items: center;
	font-weight: bold;
	display: inline-block;
	.el-icon-circle-plus {
		margin-right: 6px;
		font-size: 17px;
	}
}

.header {
	margin: 30px 0;
	position: relative;
	display: flex;
	justify-content: space-between;
	padding-right: 40px;
	.header-right-btn {
		position: absolute;
		right: 40px;
		top: -76px;
		color: @blue;
	}
}

.main-content {
	margin: 0 20px 0px 20px;
	display: flex;
	flex-wrap: wrap;
	.parkinglot-item {
		margin-right: 20px;
		margin-bottom: 20px;
		width: 364px;
		height: 170px;
		border: 1px solid @lightBorderColor;
		border-radius: 10px;
		background: @bg1;
		padding: 18px;
		.parkinglot-name {
			display: flex;
			justify-content: space-between;
			.name {
				font-size: 14px;
				color: @grey66;
				font-weight: bold;
			}
		}
		.parkinglot-item-bd {
			padding-top: 15px;
			padding-left: 24px;
			font-size: 12px;
			color: @grey99;
			position: relative;
			line-height: 1.8;
			.el-icon-loading,
			.el-icon-warning {
				position: absolute;
				left: 0;
				top: 16px;
				font-size: 16px;
			}
			.el-icon-warning {
				color: @red;
			}
		}

		.default-item-content {
			.parkinglot-item-bd {
				padding-left: 0;
				padding-top: 20px;
			}
			.parkinglot-name {
				.name {
					max-width: 150px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.status {
				color: #fff;
				width: 40px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				border-radius: 10px;
				background: @green2;
				margin-left: 20px;
				font-size: 12px;
			}

			.default-list {
				.list-item {
					position: relative;
					padding-left: 24px;
					font-size: 12px;
					color: @grey99;
					white-space: nowrap;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-bottom: 9px;
					.el-icon-check {
						color: @green2;
						font-size: 15px;
						position: absolute;
						left: 0;
						top: 0;
						font-weight: 900;
					}
				}
			}
		}
		.hover-item-content {
			.parkinglot-name {
				justify-content: space-between;
				.name {
					max-width: 196px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.parkinglot-item-bd {
				padding-left: 0;
				padding-top: 26px;
			}
			.actions {
				display: flex;
				a {
					color: @blue;
					font-size: 12px;
					height: 20px;
					line-height: 20px;
					&:not(:first-child) {
						margin-left: 15px;
					}
					&:hover {
						font-weight: bold;
					}
				}
			}

			.hover-item-bd {
				display: flex;
				flex-wrap: wrap;
				.item-router-link {
					font-size: 12px;
					width: 90px;
					height: 30px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 15px;
					background: @greyED;
					color: @lightBlack;
					margin-right: 28px;
					margin-bottom: 18px;
					&:nth-child(3n) {
						margin-right: 0;
					}
					&:hover {
						background: @blue;
						color: #fff;
						font-weight: bold;
					}
				}
			}
		}
	}
}

.pagination {
	display: flex;
	justify-content: center;
	padding-bottom: 20px;
}
